<template>
  <div class="lin_blog lin_relative">
    <div class="lin_blog_content">
        <div class="lin_blog_content_list">
          <div class="lin_blog_content_title">
            <div>
              <h1>Writing articles about life and technology. . . .</h1>
            </div>
          </div>
          <div class="lin_blog_content_life_yunnan lin_display_flex_around">
            <div>
              <img src="/images/yunnan/yunnan_one.jpg">
            </div>
            <div>
              <h3>A city full of flowers</h3>
              <h4>---- Kunming</h4>
              <span>March 28, 2025</span>
              <nuxt-link to="/blog/yunnan/kunming">
                <JournalButton/>
              </nuxt-link>
            </div>
          </div>
          <div class="lin_blog_content_life_chongqing lin_display_flex_around">
            <div>
              <img src="/images/chongqing/chongqing_one.jpg">
            </div>
            <div>
              <h3>A city built in the mountains</h3>
              <h4>---- Chongqing</h4>
              <span>April 28, 2024</span>
              <nuxt-link to="/blog/chongqing">
                <JournalButton/>
              </nuxt-link>
            </div>
          </div>

        </div>
        <div class="Subscribe">
          <Subscribe/>
        </div>
        <div>
          <Footer/>
        </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import {gsap} from 'gsap'
import { ScrollTrigger } from "gsap/ScrollTrigger";
import JournalButton from "~/ components/button/JournalButton.vue";
import Subscribe from "~/ components/main/Subscribe.vue";
import Footer from "~/ components/Footer.vue";
gsap.registerPlugin(ScrollTrigger);

const blog_gsap = async ()=> {
  const element = document.querySelector('.lin_blog_content_list')
  gsap.fromTo(element, {
        x: 50,
        duration: 0.3,
        opacity: 0,
      },
      {
        x: 0,
        duration: 1,
        opacity: 1,
        ease: "power2.inOut"
      })
}

const Subscribe_video = async() => {
  const element = document.querySelector('.Subscribe')
  gsap.fromTo(element, {
        y: 100,
        duration: 0.5,
        opacity: 0,
      },
      {
        y: 0,
        duration: 1,
        opacity: 1,
        scrollTrigger: {
          trigger: element,
          start: "top 90%",
          end: "top 70%",
          scrub: 1,
          toggleActions: "restart reverse none none",
          // markers: true,
        },
      })

}

onMounted(async () => {
  await blog_gsap()
  await Subscribe_video()
})

</script>

<style scoped lang="scss">

.lin_blog_content {
  max-width: 980px;
}

.lin_blog_content_list {
  display: flex;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
}

.lin_blog_content_title {
  margin-top: 50px;
}

.lin_blog_content_life_chongqing,
.lin_blog_content_life_yunnan{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 0;
}
.lin_blog_content_life_chongqing span,
.lin_blog_content_life_yunnan span{
  color: #4d4d4d;
  font-size: 13px;
}
.lin_blog_content_life_chongqing img,
.lin_blog_content_life_yunnan img{
  height: 350px;
  width: 300px;
  border-radius: 14px;
}

.lin_blog_content_life_chongqing:hover,
.lin_blog_content_life_yunnan:hover{
  transform: translateX(20px);
  transition: all 1s ease-in-out;
}

.Subscribe {
  padding: 100px 0;
}


</style>